<template>
    <el-card shadow="never" class="aui-card--fill">
        <div class="mod-business__notice">
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                <el-form-item>
                    <el-input v-model="dataForm.title" placeholder="标题" clearable></el-input>
                </el-form-item>
                <!--
                <el-form-item>
                    <el-date-picker
                            v-model="daterange"
                            type="daterange"
                            value-format="yyyy-MM-dd"
                            :range-separator="$t('datePicker.range')"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>
                -->
                <el-form-item>
                    <el-button @click="getDataList()">{{ $t('query') }}</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
                </el-form-item>
            </el-form>
            <el-table
                    v-loading="dataListLoading"
                    :data="dataList"
                    border
                    @selection-change="dataListSelectionChangeHandle"
                    @sort-change="dataListSortChangeHandle"
                    style="width: 100%;">
                <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                <el-table-column prop="title" label="标题" header-align="center" align="center"></el-table-column>
                <el-table-column prop="deptName" label="所属部门" header-align="center" align="center"></el-table-column>
                <el-table-column prop="typeName" label="类型" header-align="center" align="center"></el-table-column>
                <el-table-column prop="pubDate" label="开始时间" :formatter="timestampToDate" header-align="center" align="center" width="180"></el-table-column>
                <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}
                        </el-button>
                        <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    :current-page="page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="limit"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="pageSizeChangeHandle"
                    @current-change="pageCurrentChangeHandle">
            </el-pagination>
            <!-- 弹窗, 新增 / 修改 -->
            <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
        </div>
    </el-card>
</template>

<script>
    import mixinViewModule from '@/mixins/view-module'
    import AddOrUpdate from './question-add-or-update'

    export default {
        mixins: [mixinViewModule],
        data() {
            return {
                mixinViewModuleOptions: {
                    getDataListURL: '/business/question/page',
                    getDataListIsPage: true,
                    deleteURL: '/business/question',
                    deleteIsBatch: true
                },
                daterange: null,
                dataForm: {
                    title: '',
                    startDate: '',
                    endDate: ''
                }
            }
        },
        watch: {
            daterange(val) {
                this.dataForm.startDate = val[0]
                this.dataForm.endDate = val[1]
            }
        },
        components: {
            AddOrUpdate
        }
    }
</script>
